<template>
  <div class="permission">
    <div class="operate">

      <div>
        <div style="flex: 0 0 auto">
          <ep-search
              v-model="queryParam.c0302"
              placeholder="请输入任务名称"
              enter-button="chaxun "
              @search="findList"
          ></ep-search>
        </div>
        <ep-button style="margin-left: 15px" icon="refresh.svg" @click="clearBtn"></ep-button>
        <a-tree-select
            placeholder="请选择任务范围(可多选)"
            ref="taskArea"
            allowClear
            tree-checkable
            style="margin-left: 15px;width:22vw"
            v-model="queryParam.manageAreas"
            :show-checked-strategy="SHOW_PARENT"
            :treeData="taskAreaTree"
            @change="manageAreaChange()"
            size="large"
        />
      </div>
    </div>

    <a-modal
        title="巡查记录详情"
        centered
        style=""
        width="80%"
        destroyOnClose
        :mask-closable="false"
        v-model="visible"
        @cancel="handleCancel"
    >
      <patrol-details-form ref="patrolDetailsForm" @handleCancel="handleCancel" @showOrHide ="showOrHide"></patrol-details-form>
      <template slot="footer">
        <a-button @click="handleCancel">关闭</a-button>
      </template>
    </a-modal>
    <div class="ep-table">
      <zh-table  ref="tasksTable"  row-id="roleId"
                 :url="tableUrl" :columns="tableColumn" height="auto">
        <template #filter="{ $panel, column }">
          <input type="type" v-for="(option, index) in column.filters" :key="index" v-model="option.data" @input="$panel.changeOption($event, true, option)">
        </template>
        <template #operate="{ row }">
          <div class="alert-message">
            <i class="fa fa-exclamation-circle alert-message-icon"></i>
            <span class="alert-message-content">
              <ep-button status="primary" @click=showDetail(row)>巡查详情</ep-button>
            </span>
          </div>
        </template>
<!--        <template #b0129Name="{ row }">
          <template v-if="row.b0129 !== ''">
              <span :class="'examine-' + row.b0129">{{row.b0129Name}}</span>
          </template>
        </template>-->
      </zh-table>
    </div>

  </div>
</template>
<script>
import {recordQuery, getPermissionParams} from "@/services/system/whdngxlApi"
const SHOW_PARENT = TreeSelect.SHOW_PARENT;
import moment from 'moment'
import ZhTable from "@/components/zh-table/ZhTable";
import {getBatchDict} from "@/services/system/api";
import UnmovableRelics from "@/pages/whdngxl/TasksCheckManage/UnmovableRelics";
import {TreeSelect} from "ant-design-vue";
import EpSearch from "@/components/assembly/search";
import PatrolDetailsForm from "@/pages/system/form/PatrolDetailsForm";
export default {
  name: 'PatrolRecordManage',
  components: {
    PatrolDetailsForm,
    EpSearch,
    ZhTable
  },
  data() {
    return {
      dictData: {},
      filtersData:{},
      queryParam: {
        b0102:'',
        d0203:'',
        d0204:'',
        manageAreas: undefined,},
      taskAreaTree: [],
      SHOW_PARENT,
      tableColumn: [
        {type: 'seq', width: 80, fixed: 'left', align: 'center', title: '序号'},
        {field: 'd0401', title: '巡查任务细表ID',visible: false, align: 'center', width: 150},
        {field: 'b0129', title: '巡查级别ID', align: 'center',width: 120,visible: false},
        {field: 'b0102', title: '点位名称', align: 'center', width: 150,visible: true},
        {field: 'b0129Name', title: '巡查级别', align: 'center',filters:[], width: 120,visible: true,
         /* slots:{
          // 使用插槽模板渲染
          default: 'b0129Name'}*/
        },
        {field: 'taskArea', title: '任务范围', align: 'center', width: 250,visible: true},
        {field: 'd0203',title: '开始时间',sortable:true, align: 'center', width: 120,visible: true},
        {field: 'd0204',title: '截止时间',sortable:true, align: 'center', width: 120,visible: true},
        {field: 'patrolMan', title: '巡查员', align: 'center', width: 150, visible: true},
        {field: 'phone', title: '联系方式', align: 'center', width: 150, visible: true},
        {field: 'patrolTime', title: '巡查时间', align: 'center', width: 180,visible: true},
        {field: 'd0506Name', title: '健康状态',filters:[], align: 'center', width: 120,visible: true},
        {field: 'd0507Name', title: '隐患类型',filters:[], align: 'center', width: 120,visible: true},
        {field: 'd0508Name', title: '隐患程度',filters:[],align: 'center', width: 120,visible: true},
        {
          field: 'operate', title: '操作', fixed: 'right', align: 'center', width: 120, slots: {
            // 使用插槽模板渲染
            default: 'operate'
          }
        },
      ],
      tableData: [],
      tableUrl: recordQuery,
      toolbarConfig: {
        custom: true,
        slots: {}
      },
      visible: false,
    }
  },
  created() {
    //获取任务范围
    this.$http.post(getPermissionParams, {}).then((res) => {
      const data = res.result;
      this.taskAreaTree = data.orgTreeData;
    });
    this.$nextTick(() => {
      this.init()
    })
  },
  mounted() {
  },
  methods: {
    moment,
    manageAreaChange() {
      this.findList();
    },
    init() {
      const params2 = {}
      params2.dictFields = 'b0129,d0506,d0507,d0508'
      this.$http.post(getBatchDict, params2).then(res => {
        this.dictData = res.result
        //获取筛选数据
        UnmovableRelics.methods.getFiltersData(this,'tasksTable')
      })
      this.findList()
    },
    findList() {
      this.$refs.tasksTable.query(this.queryParam)
    },
    clearBtn(){
      this.findList()
    },
    handleCancel() {
      this.visible=false
    },
    showOrHide() {
      this.visible=!this.visible
    },
    showDetail(row){
      this.showOrHide()
      this.$nextTick(()=>{
        this.$refs.patrolDetailsForm.initData(row);
      })
    },
    filterRecoverMethod ({ option }) {
      option.data = ''
    },
    filterAreaMethod ({ option, row }) {
      return row.tasksArea.includes(option.data)
    },
  },
  watch: {
  }
}
</script>
<style lang="less" scoped>
.permission {
  //padding: 15px 20px 0;
  height: 100%;

  .desc,
  .operate {
    display: flex;
    align-items: center;
    justify-content: space-between;
    color: #fff;

    > div {
      flex: 0 0 auto;
      display: flex;
      align-items: center;
    }


  }

  .desc {
    margin-bottom: 20px;
  }

  .operate {
    margin-bottom: 15px;
    .field {
      flex: 0 0 auto;
      position: relative;
      margin-left: 15px;
      .field-box {
        position: absolute;
        top: 40px;
        left: 0;
        right: -40px;
        z-index: 99;
        border: 1px solid #2175a9;
        background: #002a44;
        border-radius: 5px;
        ul {
          padding: 10px;
          li {
            padding: 1px 0;
          }
        }
        .btn {
          display: flex;
          align-items: center;
          justify-content: space-between;
          padding: 5px;
          border-top: 1px solid #2175a9;
          color: #fff;
          p {
            flex: 1;
            text-align: center;
            cursor: pointer;
            &:hover {
              color: #49bbeb;
            }
          }
        }
      }
    }
  }
  .ep-table {
    height: calc(100% - 60px);
  }
}
.examine-0 {
  color: #c91010;
}
.examine-1 {
  color: #e3da01;
}
.examine-2 {
  color: #0c4eaf;
}
</style>